<script>
import { ElRadioGroup, ElRadio } from 'element-plus'
import { watch, onBeforeMount, ref } from 'vue'
export default {
  name: 'RadioWidget',
  components: {
    ElRadioGroup,
    ElRadio
  },
  props: {
    options: {
      type: [Array, Function],
      default: () => []
    }
  },
  setup(props, { attrs }) {
    const opts = ref([])
    const handleOptions = async (options) => {
      if (Array.isArray(options)) {
        opts.value = [...options]
      } else {
        const res = await props.options()
        opts.value = res
      }
    }

    onBeforeMount(() => {
      handleOptions(props.options)
    })

    watch(
      () => props.options,
      (newOptions) => {
        handleOptions(newOptions)
      }
    )

    return () => {
      return (
        <el-radio-group {...attrs}>
          {opts.value.map(({ label, value }) => (
            <el-radio label={value} key={value}>
              {label}
            </el-radio>
          ))}
        </el-radio-group>
      )
    }
  }
}
</script>
